<!DOCTYPE html>
<html>
    <head>
        <title>by 司徒正美</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../avalon.js"></script>
        <script>
            avalon.define("ancestor", function(vm) {
                vm.aaa = '1111111111'
                vm.$watch("aaa", function(v) {
                    avalon.log(v)
                    avalon.log("ancestor.aaa事件被触发了")
                })
                vm.click = function() {
                    avalon.log("向下广播")
                    vm.$fire("down!aaa", "capture")
                }
            })
            avalon.define("parent", function(vm) {
                vm.text = "222222222"
                vm.aaa = '3333333333'
                vm.$watch("aaa", function(v) {
                    avalon.log(v)
                    avalon.log("parent.aaa事件被触发了")
                })
                vm.click = function() {
                    avalon.log("全局扩播")
                    vm.$fire("all!aaa", "broadcast")
                }
            })
            avalon.define("son", function(vm) {
                vm.$watch("aaa", function(v) {
                    avalon.log(v)
                    avalon.log("son.aaa事件被触发了")
                })
                vm.click = function() {
                    avalon.log("向上冒泡")
                    vm.$fire("up!aaa", "bubble")
                }
            })

            function checkControllersDomReady(callback, max) {
                max = max || 20
                var index = 0
                var id = setInterval(function() {
                    index++
                    if (_checkExprReady()) {
                        clearInterval(id)
                        callback()
                    } else {
                        if (index > max) {
                            clearInterval(id)
                        }
                    }

                }, 50)

                function _checkControllersDomReady() {
                    var ok = true
                    var all = avalon.vmodels
                    for (var i in all) {
                        if (all[i].$init) {
                            continue
                        }
                        if (!all[i].$events.expr) {
                            return false
                        }

                    }
                    return ok
                }
            }
        </script>
        <style>

        </style>
    </head>
    <body class="ms-controller"   ms-controller="ancestor">
        <h3>avalon vm.$fire的升级版 </h3>
        <button type="button" ms-click="click">
            capture
        </button>
        <div ms-controller="parent">
            <button type="button" ms-click="click">broadcast</button>
            <div ms-controller="son">
                <button type="button" ms-click="click">
                    bubble
                </button>
            </div>
        </div>
    </body>
</html>
